<nav id="nav-bar">
  <div>
    <div id="nav-bg" [style.background-image]="webHeadImgUrl" *ngIf="userService.user"></div>

    <div id="nav-shadow"></div>

    <div id="nav-head">

      <app-avatar *ngIf="userService.user" [user]="userService.user"></app-avatar>

      <div id="nav-icons" *ngIf="userService.user">

        <!--        <div class="nav-menu-text" style="color: #ffffff;">{{userService.user.username}}</div>-->

        <div class="nav-icon-small">
          <div matTooltip="分享率" class="nav-icon-div">
            <mat-icon svgIcon="rate"></mat-icon>
            <p>{{userService.user.uploaded | rate: userService.user.downloaded}}</p>
          </div>

          <div matTooltip="下载量" class="nav-icon-div">
            <mat-icon svgIcon="download"></mat-icon>
            <p>{{userService.user.downloaded | byte}}</p>
          </div>

          <div matTooltip="上传量" class="nav-icon-div">
            <mat-icon svgIcon="up"></mat-icon>
            <p>{{userService.user.uploaded | byte}}</p>
          </div>

          <div matTooltip="金币" class="nav-icon-div">
            <mat-icon svgIcon="gold"></mat-icon>
            <p>{{userService.user.gold}}</p>
          </div>

          <div matTooltip="砖石" class="nav-icon-div">
            <mat-icon svgIcon="diamond"></mat-icon>
            <p>{{userService.user.diamond}}</p>
          </div>
        </div>
      </div>
    </div>

    <div id="nav-right">

      <div class="nav-icon-small">
        <button mat-icon-button matTooltip="切换主题" color="primary" [matMenuTriggerFor]="themeMenu">
          <mat-icon svgIcon="format_color_fill"></mat-icon>
          <mat-menu #themeMenu="matMenu">
            <mat-grid-list cols="2" rowHeight="1:1">

              <mat-grid-tile>
                <div class="docs-theme-picker-menu" mat-menu-item (click)="changeTheme('indigo-pink')">
                  <div class="docs-theme-picker-swatch">
                    <div class="docs-theme-picker-primary" style="background-color: #3f51b5"></div>
                  </div>
                  <div class="mat-menu-ripple mat-ripple" mat-ripple=""></div>
                </div>
              </mat-grid-tile>

              <mat-grid-tile>
                <div class="docs-theme-picker-menu" mat-menu-item (click)="changeTheme('deeppurple-amber')">
                  <div class="docs-theme-picker-swatch">
                    <div class="docs-theme-picker-primary" style="background-color: #673ab7"></div>
                  </div>
                  <div class="mat-menu-ripple mat-ripple" mat-ripple=""></div>
                </div>
              </mat-grid-tile>

              <mat-grid-tile>
                <div class="docs-theme-picker-menu" mat-menu-item (click)="changeTheme('pink-bluegrey')">
                  <div class="docs-theme-picker-swatch">
                    <div class="docs-theme-picker-primary" style="background-color: #c2185b"></div>
                  </div>
                  <div class="mat-menu-ripple mat-ripple" mat-ripple=""></div>
                </div>
              </mat-grid-tile>

              <mat-grid-tile>
                <div class="docs-theme-picker-menu" mat-menu-item (click)="changeTheme('purple-green')">
                  <div class="docs-theme-picker-swatch">
                    <div class="docs-theme-picker-primary" style="background-color: #7b1fa2"></div>
                  </div>
                  <div class="mat-menu-ripple mat-ripple" mat-ripple=""></div>
                </div>
              </mat-grid-tile>
            </mat-grid-list>
          </mat-menu>
        </button>
      </div>

      <button mat-icon-button color="primary" [matMenuTriggerFor]="helpMenu" *ngIf="userService.user">
        <mat-icon svgIcon="help"></mat-icon>
        <mat-menu #helpMenu="matMenu">
          <button mat-menu-item>规则</button>
          <button mat-menu-item [routerLink]="'/faq'">常见问题</button>
        </mat-menu>
      </button>
    </div>
  </div>
  <div id="nav-menu" *ngIf="userService.user">
    <div>
      <button mat-icon-button [routerLink]="'/home'">
        <mat-icon svgIcon="home"></mat-icon>
      </button>
      <div class="nav-menu-text">首页</div>
    </div>

    <div>
      <button mat-icon-button [routerLink]="'/forum'">
        <mat-icon svgIcon="forum"></mat-icon>
      </button>
      <div class="nav-menu-text">论坛</div>
    </div>

    <div>
      <button mat-icon-button [matMenuTriggerFor]="torrentMenu">
        <mat-icon svgIcon="torrent"></mat-icon>
        <mat-icon svgIcon="arrow_drop_down"></mat-icon>
      </button>
      <div class="nav-menu-text">种子</div>
      <mat-menu #torrentMenu="matMenu">
        <button mat-menu-item [routerLink]="'/torrent'">全部</button>
        <ng-container *ngIf="configService.userConfig && configService.userConfig.categoryList">
          <button mat-menu-item
                  *ngFor="let category of configService.userConfig.categoryList">{{category.name}}</button>
        </ng-container>
      </mat-menu>
    </div>
  </div>
</nav>
